<script>
export default {
  name: "itemList",
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    detail() {
      let item = this.item.idle_item
      let imageList = []
      if (item.images) {
        imageList = item.images.split(',').filter(item => item)
      }
      return {
        ...item,
        imageList
      }
    },
    getStatusText() {
      if (this.item.status === 'pending') {
        return '待审批'
      } else if (this.item.status === 'approved') {
        return  '已通过'
      } else if (this.item.status === 'rejected') {
        return  '已拒绝'
      } else if (this.item.status === 'canceled') {
        return  '已取消'
      }
    }
  },
  methods: {
    handleDetail(item) {
      uni.navigateTo({
        url: `/pages/my/apply/detail?id=${item.item_id}&transfer_id=${item.id}`
      })
    },
  }
}
</script>

<template>
  <view class="house-item" @click="handleDetail(item)">
    <image class="house-image" :src="detail.post_url"/>
    <view class="house-info">
      <view style="width: 100%">
        <view style="width: 100%;display: flex;justify-content:space-between;align-items: center">
          <text class="house-title">{{ detail.name }}</text>
          <view class="house-tags" style="margin: 12rpx 0">
            <text class="tag" v-for="item in [getStatusText]">{{ item }}</text>
          </view>
        </view>
        <view class="house-detail">
         <text class="location"> 使用日期：{{ item.start_date }}</text>
        </view>
        <view class="house-detail">
          <text class="location">归还日期： {{ item.end_date }}</text>
        </view>
      </view>
      <view class="house-detail">
        <text class="location">数量： {{ item.quantity }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">

.house-item {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 20rpx 18rpx 12rpx 18rpx;
  margin: 24rpx 0;
  display: flex;
  align-items: center;
}

.house-image {
  width: 240rpx;
  height: 180rpx;
  border-radius: 12rpx;
  margin-right: 32rpx;
  flex-shrink: 0;
}

.house-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.house-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.house-detail {
  display: flex;
  align-items: center;
}

.location, .area, .type {
  font-size: 14px;
  color: #666666;
}

.house-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6rpx;
}
.house-tags .tag {
  padding: 4rpx 8rpx;
  background: #f0f7ff;
  color: #2b85e4;
  border-radius: 2rpx;
  font-size: 20rpx;
  margin-bottom: 4rpx;
}
.line {
  height: 20rpx;
  width: 2rpx;
  background-color: #DCDCDC;
  margin: 0 24rpx;
}
.house-price {
  display: flex;
  align-items: baseline;
}

.price {
  font-size: 24rpx;
  color: #FF6B6B;
  font-weight: bold;
}

.unit {
  font-size: 20rpx;
  color: #FF6B6B;
  margin-left: 4rpx;
}

.unit-price {
  font-size: 24rpx;
  color: #999999;
  margin-right: 24rpx;
}
</style>
